<template>
  <div class="content">
    <!--<el-form ref="form" v-bind="getFormProps()" class="content">-->
      <heading class="title" grade="1">创建分组—步骤2</heading>
      <groupList :list="groupList" v-on:check="handleCheck">
      </groupList>
      <!--<el-form-item>-->
        <div class="match-list">
          <div class="match-item">
            <el-select v-model="valueList[keyLength]" placeholder="请选择参赛的队伍" @change="handleChange(keyLength)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
          <div class="match-item">
            <el-select v-model="valueList[keyLength + 1]" placeholder="请选择参赛的队伍" @change="handleChange(keyLength + 1)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
          <div class="match-item">
            <el-select v-model="valueList[keyLength + 2]" placeholder="请选择参赛的队伍" @change="handleChange(keyLength + 2)" >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
          <div class="match-item">
            <el-select v-model="valueList[keyLength + 3]" placeholder="请选择参赛的队伍" @change="handleChange(keyLength + 3)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div> 
        </div>
      <cellbox>
        <cell-item class="tr large weak">待分配数量：{{this.number}}</cell-item>
      </cellbox>
      <!--</el-form-item>-->
      <div class="button-box">
        <!--<el-form-item>-->
          <router-link :to="{path: '/race/detail/manage/cupfirst', query: {id: this.$route.query.id, matchId: this.$route.query.id, tasktype: this.$route.query.tasktype, isRun: this.$route.query.isRun}}">
            <el-button type="primary">上一步</el-button>
          </router-link>
          <el-button type="primary" @click="handleMatch">随机匹配</el-button>
          <el-button type="primary" @click="handleSubmit">下一步</el-button>
        <!--</el-form-item>-->
      </div>
    <!--</el-form>-->
  </div>
</template>

<script>
import groupList from './components/GroupList'
// import {form} from 'utils/mixins'
export default {
  // mixins: [form],
  components: {
    groupList
  },
  props: {
    keyLength: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 8
    }
  },
  data () {
    return {
      number: 59,
      activeIndex: '',
      // form: {
      //   valueList: new Array(this.total / 2)
      // },
      groupList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG'],
      options: [{
        value: '选项1',
        label: '黄金糕'
      },
      {
        value: '选项2',
        label: '双皮奶'
      },
      {
        value: '选项3',
        label: '蚵仔煎'
      },
      {
        value: '选项4',
        label: '龙须面'
      }],
      valueList: new Array(this.total / 2)
    }
  },
  created () {
    // console.log('1', this)
  },
  methods: {
    handleCheck (obj) {
      this.activeIndex = obj.index
      console.log(this.activeIndex)
    },
    handleChange (val) {
      for (var i = 0; i < this.options.length; i++) {
        var ischecked = false
        if (this.options[i].value === this.valueList[val]) {
          ischecked = true
          break
        }
      }
      if (!ischecked) {
        this.$set(this.options[i], 'disabled', false)
      } else {
        this.$set(this.options[i], 'disabled', true)
      }
    },
    handleMatch () {
      this.valueList = ['参赛者6', '参赛者2', '参赛者4', '参赛者5']
    },
    handleSubmit () {
      // if (this.number !== 0) {
      //   this.$message('还有未分配的队伍或参赛者哦！')
      //   return false
      // }
      this.$router.push({
        path: '/race/detail/manage/cupthird?id=' + this.$route.query.id +
              '&tasktype=' + this.$route.query.tasktype +
              '&matchtype=' + this.$route.query.matchtype +
              '&isRun=' + this.$route.query.isRun
      })
    }
  }
}
</script>

<style>
.match-list {
  margin-top: 20px;
  /*margin-left: -142px;*/
}

.match-item {
  margin-top: 10px;
}
</style>
